<template>
  <div class="swipess-box">
    <div class="slider" @mouseover="stopAutoPlay" @mouseleave="setAutoPlay">
      <div class="slider-list">
        <div v-for="(item, index) in imglist" :key="index">
          <a :href="imgHref + item.fid">
            <div :class="['slider-item', setItemClass(index)]">
              <img :src="item.cimg" />
            </div>
          </a>
        </div>
        <div @click="prev" class="i-left">
          <i class="arrow arrow-left"
            ><svg
              t="1598261572608"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3271"
              width="100%"
              height="100%"
            >
              <path
                d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z"
                p-id="3272"
                fill="#ccc"
              ></path></svg
          ></i>
        </div>
        <div @click="next" class="i-right">
          <i class="arrow arrow-right"
            ><svg
              t="1598261670602"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3400"
              width="100%"
              height="100%"
            >
              <path
                d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z"
                p-id="3401"
                fill="#ccc"
              ></path></svg
          ></i>
        </div>
      </div>
    </div>
    <div class="dots" @mouseover="stopAutoPlay" @mouseleave="setAutoPlay">
      <span
        v-for="(item, index) in imglist"
        :key="index"
        :style="setDotActiveStyl(index)"
        @mouseover="currentIndex = index"
      ></span>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
  name: "swipes2",
  data() {
    return {
      imglist: "",
      timer: null,
      currentIndex: 0,
      imgHref: "/showfood?fid=",
    };
  },
  computed: {
    listLength() {
      return this.imglist.length - 1;
    },
  },
  created() {
    request({
      url: "/firstpage/queryFirstPageLunBoTu",
    })
      .then((res) => {
        this.imglist = res.data.data;
        // for(let i = 0 ; i <=this.imglist.length ; i++){
        //   this.list = this.imglist[i].cimg
        //   console.log(this.list);
        // }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    setItemClass(i) {
      const prev =
        this.currentIndex == 0 ? this.listLength : this.currentIndex - 1;
      const next =
        this.currentIndex == this.listLength ? 0 : this.currentIndex + 1;
      switch (i) {
        case this.currentIndex:
          return "active";
        case prev:
          return "prev";
        case next:
          return "next";
        default:
          return "";
      }
    },
    prev() {
      this.currentIndex == 0
        ? (this.currentIndex = this.listLength)
        : this.currentIndex--;
      console.log(this.imglist);
    },
    next() {
      this.currentIndex == this.listLength
        ? (this.currentIndex = 0)
        : this.currentIndex++;
    },
    setAutoPlay() {
      this.timer = setInterval(() => {
        this.next();
      }, 5000);
    },
    stopAutoPlay() {
      clearInterval(this.timer);
    },
    setDotActiveStyl(i) {
      if (i == this.currentIndex) {
        return { backgroundColor: "#D33A31" };
      }
    },
  },
  mounted() {
    this.setAutoPlay();
  },
};
</script>

<style>
.swipess-box {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  margin-top: 0.6rem;
  font-size: 0.15rem;
}

.slider {
  width: 100%;
  height: 2.4rem;
  user-select: none;
}
.slider-list {
  position: relative;
  margin-top: 0.1rem;
  height: 100%;
  transform-style: preserve-3d;
}
.slider-item {
  position: absolute;
  margin: 0 50%;
  width: 5.4rem;
  height: 100%;
  transform: translate3d(-50%, 0, -2rem) scale(0.8);
  transition: all 0.6s ease-in-out;
  border-radius: 0.2rem;
  overflow: hidden;
}
.slider-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.i-left {
  position: absolute;
  width: 20%;
  height: 2.1rem;
  z-index: 9999;
  left: 0;
  cursor: pointer;
}

.i-right {
  position: absolute;
  bottom: 0;
  width: 20%;
  height: 2.1rem;
  z-index: 9999;
  right: 0;
  cursor: pointer;
}

.slider-item.prev {
  margin: 0;
  transform: translate3d(0, 0, -1rem) scale(0.8);
  transform-origin: left;
  z-index: 998;
}
.slider-item.next {
  margin: 0 100%;
  transform: translate3d(-100%, 0, -100px) scale(0.8);
  transform-origin: right;
  z-index: 998;
}
.slider-item.active {
  transform: translate3d(-50%, 0, 0) scale(1);
  z-index: 999;
}
.slider-item::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  transition: all 0.6s;
}
.slider-item.active::after {
  opacity: 0;
}
.arrow {
  position: absolute;
  top: 50%;
  display: block;
  width: 0.3rem;
  cursor: pointer;
  transform: translate3d(0, -50%, 0);
}
.arrow.arrow-right {
  right: 0;
}
.dots {
  text-align: center;
  width: 0.8rem;
  margin: 0 auto;
}
.dots span {
  display: inline-block;
  width: 0.045rem;
  height: 0.045rem;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0.2rem 0 0 0.08rem;
  cursor: pointer;
}
</style>